import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NIcon, useMessage } from 'naive-ui'
import { RefreshRound } from '@vicons/material'
import { storeToRefs } from 'pinia'

import AppBreadcrumb from '@/layouts/components/breadcrumb'
import AppHamburger from '@/layouts/components/hamburger'

import { useAppStore } from '@/store/app'

export default defineComponent({
  name: 'AppNavBar',
  setup() {
    const router = useRouter()
    const message = useMessage()
    const appStore = useAppStore()
    const { sidebar } = storeToRefs(appStore)

    return {
      sidebar,
      async LogOut() {
        router.replace('/login')
        message.success('登出系统成功')
      },
      refresh() {
        appStore.refresh()
      },
      toggleSideBar() {
        appStore.toggleSideBar()
      },
      goBack() {
        router.go(-1)
      }
    }
  },
  render() {
    return (
      <div class='app-navbar-header'>
        <AppHamburger onToggle={this.toggleSideBar} isActive={this.sidebar.opened} />

        <AppBreadcrumb />

        <ul class='app-navbar-menu'>
          <li class='app-navbar-menu__item'>
            <NButton size='small' class='app-navbar-menu__item' onClick={this.goBack}>
              返回
            </NButton>
          </li>
          <li class='app-navbar-menu__item'>
            <NButton
              size='small'
              onClick={this.refresh}
              v-slots={{
                icon: () => (
                  <NIcon>
                    <RefreshRound />
                  </NIcon>
                )
              }}>
              刷新
            </NButton>
          </li>
          <li class='app-navbar-menu__item'>|</li>
          <li class='app-navbar-menu__item'>
            <a href='javascript:;' onClick={this.LogOut}>
              登 出
            </a>
          </li>
        </ul>
      </div>
    )
  }
})
